<template>
    <el-row :span="24" class="col">
        <el-col :span="3" style="text-align: right;padding: 7px 10px;">门店名称</el-col>
        <el-col :span="20"><el-input v-model="community.communityName"></el-input></el-col>
    </el-row>
    <el-row :span="24" class="col" style="margin: 10px 0;">
        <el-col :span="3" style="text-align: right;padding: 7px 10px;">所属地区</el-col>
        <el-col :span="20">
            <el-row style="margin-bottom: 20px;">
                <el-col :span="24">
                    <el-cascader size="large" :options="options" v-model="selectedOptions" @change="handleChange" />
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24"><el-input v-model="xiangxi"></el-input></el-col>
            </el-row>
        </el-col>
    </el-row>
    <el-row :span="24" class="col">
        <el-col :span="3" style="text-align: right;padding: 7px 10px;">门店坐标</el-col>
        <el-row :span="20">
            <el-col :span="4"><el-button @click="getlocation">获取位置</el-button></el-col>
            <el-col :span="12" style="padding:10px 0;margin-left: 80px;">{{ location }}</el-col>
        </el-row>
    </el-row>
    <el-row :span="24" class="col" style="margin: 20px 0;">
        <el-col :span="3" :offset="18">
            <el-button type="default" @click="cancle">取消</el-button></el-col>
        <el-col :span="3">
            <el-button type="primary" @click="save">保存</el-button></el-col>
    </el-row>
</template>

<script setup>
import { ref, defineEmits, defineProps, watchEffect } from "vue";
import { regionData } from "element-china-area-data";
import axios from "axios";

const options = ref(regionData);
const selectedOptions = ref([]);
const props = defineProps({
    xiaoqu: {
        type: Object,
        default: () => {
            return {};
        }
    }
})
const xiangxi = ref(props.xiaoqu.communityAddress);
const address = ref("");
const location = ref(props.xiaoqu.communityLongitude);
const emits = defineEmits(["operate"]);
const community = ref(props.xiaoqu)

const handleChange = () => {
    // console.log(selectedOptions.value);
    // console.log(regionData);
    let sheng = regionData.find(item => (item.value == selectedOptions.value[0]));
    let shi = sheng.children.find(item => (item.value == selectedOptions.value[1]));
    let qu = shi.children.find(item => (item.value == selectedOptions.value[2]));
    address.value = sheng.label + shi.label + qu.label;
    // console.log(address);
    community.value = { ...community.value, communityProvince: sheng.label, communityCity: shi.label, communityDistrict: qu.label, communityAddress: xiangxi.value, communityCoordinates: shi.label + qu.label, address: address.value }
}
const save = function () {
    emits("operate", { ...community.value, communityLatitude: location.value.split(",")[0], communityLongitude: location.value.split(",")[1], addOrUpdateFlag: 2 });
}

const cancle = function () {
    emits("operate");
}

const getlocation = async function () {
    let res = await axios.get(`https://restapi.amap.com/v3/geocode/geo?key=457886b5972a97e93fb9cdccebfd450f&address=${address.value + xiangxi.value}`);
    console.log(res);
    location.value = res.data.geocodes[0].location;
}

watchEffect(function () {
    community.value = props.xiaoqu;
})
</script>

<style lang="less" scoped></style>